<template>
  <div>
    <baidu-map
      ref="baiduMap"
      class="map"
      :center="center"
      :zoom="16"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bm-polyline
        :path="lineList"
        strokeColor="blue"
        :strokeOpacity="0.7"
        :strokeWeight="3"
      >
      </bm-polyline>
      <bm-circle
        v-for="(item, index) in circleList"
        :key="index"
        :center="item.center"
        :radius="item.radius"
        stroke-color="red"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="false"
      ></bm-circle>
    </baidu-map>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      center: { lng: 0, lat: 0 },
      lineList: [],
      circleList:[]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
       let url = window.location.href
      // let url =
      //   "https://chengtou.iotdt.com:40016/trajectory?ledgerId=471eca9a-8bfe-47ad-9624-fc7ab17091c2";
      let id = url.split("?")[1].split("=")[1];
      this.init(id)
    },
    init(id) {
      let params = {
        ledgerId: id
      };
      this.$http({
        url: this.$http.adornUrl(`/sys/gps/trajectory/separate`),
        method: "post",
        params: this.$http.adornParams(params)
      }).then(({ data }) => {
        console.log(data)
        // this.initTrack(data);
        this.center.lng = data.lng;
        this.center.lat = data.lat
        data.reality.forEach(item => {
          this.lineList.push({
            lng: item.lon,
            lat: item.lat
          });
        });
        data.plan.forEach(item => {
          this.circleList.push({
            center:{
              lng:item.lng,
              lat:item.lat
            },
            radius:item.radius
          })
        })
      });
    },
    handler({ Bmap, map }) {
      this.center.lng = 104.07;
      this.center.lat = 30.54;
    },
    initTrack(pointArray) {
      this.$nextTick(() => {
        const map = this.$refs.baiduMap.getMap();
        const polylinePoints = pointArray.map(point => {
          return new BMap.Point(point.lon, point.lat);
        });
        const polyline = new BMap.Polyline(polylinePoints, {
          strokeColor: "blue",
          strokeWeight: 3,
          strokeOpacity: 0.5
        });
        map.addOverlay(polyline);
      });
    },
  }
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100vh;
}
</style>
